<template>
  <!-- 余额管理 -->
  <view class="balance-content">
    <view class="balance-title">
      <view class="mb-40 flex justify-between items-center">
        <view class="tit">我的余额</view>
      </view>
      <view class="nums">余额: <text class="ml-10">{{ balance }}</text></view>
    </view>
    <view class="balance-info">
      <view class="flex justify-between items-center mb-24 balance-info-title">
        <view>对帐单</view>
        <view @click="showPicker" class="flex items-center">
          <view>{{ showzhym(timesInfo) }}</view>
          <image class="chevrondown" :src="IMG_URL2 + 'common/chevron-down.svg'" />
        </view>
      </view>
      <view class="flex justify-between items-center"
        style="font-size: 12px; color: rgba(0, 0, 0, 0.4); padding: 16rpx 0">
        <view>时间</view>
        <view>金额</view>
        <view>操作人</view>
        <view>备注</view>
      </view>
      <view v-if="balanceList.length > 0" class="container">
        <view v-for="(item, index) in balanceList" :key="index" class="flex justify-between items-center"
          style="font-size: 12px; color: rgba(0, 0, 0, 0.6); padding: 16rpx 0">
          <view>2024</view>
          <view>+60</view>
        </view>
      </view>
      <view v-else class="empty-container flex justify-center items-center">
        <Empty :emptyInfo="emptyInfo" />
      </view>
    </view>
    <up-datetime-picker :show="show" v-model="timepicker" mode="year-month" @confirm="confirm"
      @cancel="cancel"></up-datetime-picker>
  </view>
</template>

<script setup>
import { reactive } from 'vue';
import Empty from "@/components/empty.vue";
import { IMG_URL2 } from "@/config";
import { onLoad, onReady } from '@dcloudio/uni-app';
import { shopApi } from "@/api";
import { formatDate } from '@/utils/util';
// 创建响应式数据  
let show = ref(false);
let balance = ref(0)
const getCurrentTime = () => {
  const now = new Date();

  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  return `${year}-${month}`
}
const EmptyImage = ref(IMG_URL2 + "empty/normal.png");
const emptyInfo = ref({
  image: EmptyImage,
  width: 300,
  height: 300,
  tip: "暂无余额数据~"
});

let timepicker = ref(new Date())
let timesInfo = ref(getCurrentTime())
let balanceList = ref([])
let currentPage = ref(1)
let pageSize = ref(15)
let totalCount = ref(0)
let loadStatus = ref('正在加载中')




const showPicker = () => {
  show.value = true
}
const close = () => {
  show.value = false
}
const cancel = () => {
  show.value = false
}
const showzhym = (val)=>{
  console.log(val,'val')
  return val
}
const confirm = (e) => {
  timepicker.value = e.value
  timesInfo.value= formatDate(e.value, 'ym')
  getData(1)
  show.value = false
}
const getData = (type) => {
  let data = {
    "currentPage": currentPage.value,
    "time": timesInfo.value,
    "pageSize": pageSize.value
  }
  shopApi.SHOPGETFRANCHISEEBALANCERECORD(data).then((res) => {
    if (res.code == 200) {
      if (type == 1) {
        balanceList.value = res.result.data
        totalCount.value = res.result.totalCount
      } else {
        balanceList.value = balanceList.value.concat(res.result.data)
      }
    }else{
            uni.showToast({
                title: res.errMsg,
                icon: "success",
            });
        }

  })
}
onLoad((options) => {
  if (options.value) {
    balance.value = options.value
  }
  getData(1)
})
// 触底加载
onReachBottom(() => {
  // uni.showToast({
  //   title: "触底加载……",
  //   icon: "none",
  //   duration: 1000
  // });
  console.log("触底加载");
  if (balanceList.value.length >= totalCount.value) {
    loadStatus.value = "没有更多数据了";
    return
  }
  loadStatus.value = "正在加载中";
  currentPage.value++
  getData(2)
});

// 下拉刷新
onPullDownRefresh(() => {
  uni.showToast({
    title: "下拉刷新",
    icon: "none",
    duration: 1000
  });
  loadStatus.value = "正在加载中";
  currentPage.value = 1
  totalCount.value = 0
  isloading.value = false

  balanceList.value = [];
  getData(1)
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 2000);
});
</script>
<style lang="scss">
page {
  background-color: #f3f3f3;
}
</style>
<style lang="scss" scoped>
.balance-content {
  padding: 24rpx;
  box-sizing: border-box;
  overflow-y: hidden;

  .balance-title {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 16rpx 32rpx;
    box-sizing: border-box;
    margin-bottom: 24rpx;

    .tit {
      font-family: PingFang SC;
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
      text-align: left;
      color: rgba(0, 0, 0, 0.6);
    }

    .nums {
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: 600;
      line-height: 24px;
      text-align: left;
      color: rgba(214, 142, 68, 1);
    }
  }

  .balance-info {
    width: 100%;
    border-radius: 16rpx;
    padding: 16rpx 32rpx;
    box-sizing: border-box;
    background-color: #fff;
    z-index: 1;

    .balance-info-title {
      font-family: PingFang SC;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      text-align: center;
      color: rgba(0, 0, 0, 0.9);
      border-bottom: 1rpx solid rgba(231, 231, 231, 1);
      padding: 24rpx 12rpx;
      box-sizing: border-box;

      .chevrondown {
        width: 32rpx;
        height: 32rpx;
        margin-left: 10rpx;
      }
    }
  }
}
</style>